
<html>
<head>
    <meta charset="UTF-8">
    <title>MyVue</title>
    <link rel="stylesheet" href="styles/demo.css">
</head>
<body>
<div id="app">
    <fieldset>
        <legend>
            Create New Person
        </legend>
        <div class="form-group">
            <label>Name:</label>
            <input type="text" v-model="newPerson.name"/>
        </div>
        <div class="form-group">
            <label>Age:</label>
            <input type="text" v-model="newPerson.age"/>
        </div>
        <div class="form-group">
            <label>Sex:</label>
            <select v-model="newPerson.sex">
                <option value="处女">处女</option>
                <option value="人妖">人妖</option>
            </select>
        </div>
        <div class="form-group">
            <label></label>
            <button @click="createPerson">Create</button>
        </div>
    </fieldset>
    <table>
        <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Sex</th>
            <th>Delete</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="person in people">
            <td>{{ person.name }}</td>
            <td>{{ person.age }}</td>
            <td>{{ person.sex }}</td>
            <td :class="'text-center'"><button @click="deletePerson($index)">Delete</button></td>
        </tr>
        </tbody>
    </table>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue(
        {
            el:"#app",
            data:{
                newPerson:{
                    name:'',
                    age:16,
                    sex:'处女'
                },
                people:[
                    {name:"柳如是",age:23,sex:"处女"},
                    {name:"苏小小",age:19,sex:"处女"},
                    {name:"徐睿",age:38,sex:"人妖"},
                ]
            },
            methods:{
                createPerson:function () {
                    this.people.push(this.newPerson);
                    this.newPerson = {name: '', age: 0, sex: '处女'}
                },
                deletePerson:function (index) {
                    console.log("index"+index)
                    this.people.splice(index,1)
                }
            }
        }
    )
</script>
</body>
</html>
